//
// Utility classes
// --------------------------------------------------

//清除浮动
.clearfix {
  @include clearfix;
}

//块级元素居中
.center-block {
  @include center-block;
}

//向右浮动
.pull-right {
  float: right !important;
}

//向左浮动
.pull-left {
  float: left !important;
}

//隐藏
.hide {
  display: none !important;
}

//显示
.show {
  display: block !important;
}

//消失
.invisible {
  visibility: hidden;
}

//文字不显示
.text-hide {
  @include text-hide;
}

.grey-font {
  color: $grey-font-color;
}

.orange-font {
  color: $orange-font-color;
}

//行末省略
.ellipsis {
  @include ellipsis();
}

.ellipsis-2 {
  @include ellipsis(2);
}

.ellipsis-3 {
  @include ellipsis(3);
}

.ellipsis-4 {
  @include ellipsis(4);
}

.ellipsis-5 {
  @include ellipsis(5);
}

// vertical-align： middle
.middle {
  vertical-align: middle;
}

.border-top,.border-bottom {
  position: relative;
}

.border-top {
  &::before{
    @include border();
  }
}
 
.border-bottom::after {
  @include border('bottom');
}

.weui-btn-default-blue {
  border-color: $accent-color-light!important;
  color: $accent-color-light!important;

  &:active {
    border-color: $accent-color!important;
    color: $accent-color!important;
  }
}

.weui-btn-primary-blue {
  border-color: $accent-color-light!important;
  background: $accent-color-light!important;
  &:active {
    border-color: $accent-color!important;
    background: $accent-color!important;
  }
}

//1px解决方案，根据dpr调整border跨度
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  .border-top::before,.border-bottom::after {
    transform: scaleY(0.66);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .border-top::before,.border-bottom::after {
    transform: scaleY(0.5);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .border-top::before,.border-bottom::after {
    transform: scaleY(0.4);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .border-top::before,.border-bottom::after {
    transform: scaleY(0.33);
  }
}
